<template>
    <transition name="fade">
        <cube-popup 
            v-show="visible"
            :mask-closable=true
            :z-index="90"
            position="bottom"
            type="shop-car-list"
            @mask-click="maskClick">
            <transition 
                name="move"
                @after-leave="afterLeave"
                >
                <div class="shopcart-list" v-show="visible">
                    <div class="list-header">
                        <div class="title">购物车</div>
                        <span class="empty" @click="empty">清空</span>
                    </div>
                    <cube-scroll
                        ref="listContent"
                        class="list-content">
                        <ul>
                            <li class="food" v-for="(food,index) in selectFoods" :key=index>
                                <span class="name">{{food.name}}</span>
                                <div class="price">
                                    <span>
                                        ￥{{food.price * food.count}}
                                    </span>
                                </div>
                                <div class="cartcontrol-wrapper">
                                    <cartcontrol @add="onAdd" :food="food"></cartcontrol>
                                </div>
                            </li>
                        </ul>
                    </cube-scroll>
                </div>
            </transition>
         </cube-popup>
    </transition>
</template>
<script>
import cartcontrol from "components/cartcontrol/cartcontrol"
import popupMixin from "common/mixins/popup"
 export default{
    mixins: [popupMixin],
    name:"shop-car-list",
    props: {
        selectFoods:{
            type:Array,
            default(){
                return []
            }
        }
      },
    created () {
      // $emit触发事件，用来发送，$on监听事件发生
      // created钩子执行的时候未加载dom，如果要执行dom加载后事件需要用$nextTick 
      this.$on("show",()=>{
        // $nextTick   dom完成后动作
          this.$nextTick(()=>{
            // 刷新高度
            this.$refs.listContent.refresh()
          })
      })
    },
    methods: {
        // show(){
          // this.visible=true
          // 滚动失败是因为在visible等于false的时候已经固定了高度，需要在显示后重新绘测高度
        // },
        // hide(){
        //   this.$emit("hide")
        //   this.visible=false
        // },
        maskClick(){
          this.hide()
        },
        afterLeave(){
          //过渡钩子，监听关闭动画完成，发送监听事件
          this.$emit("afterLeave")
        },
        onAdd(target){
          //target点击目标,是接收于cartcontrol，是cartcontrol传过来的event.target
          this.$emit("add",target)
        },
        empty(){
          //调用dialog组件，dialog是内置的createApi方式
         this.$createDialog({
            type:"confirm",
            title:"清空购物车", 
            content:"确认清空吗？",
            $events:{
              confirm:()=>{
                //清空选择的食物
                this.selectFoods.forEach((food)=>{
                  food.count=0
                })
                this.hide()
              }
            },
          }).show()
        }
    },
    components: {
        cartcontrol
      }
 }
</script>
<style lang="stylus" rel="stylesheet/stylus">
 @import "../../common/stylus/mixin";
 .cube-shop-car-list
   bottom:48px
   &.fade-enter , &.fade-leave-active
     opacity : 0 
   &.fade-enter-active , &.fade-leave-active
     transition : all 0.3s ease-in-out
   .shopcart-list
     &.move-enter-active, &.move-leave-active
       transition: all 0.5s
     &.move-enter, &.move-leave-active
       transform: translate3d(0, 100%, 0)
     .list-header
       height: 40px
       line-height: 40px
       padding: 0 18px
       background: #f3f5f7
       border-bottom: 1px solid rgba(7, 17, 27, 0.1)
       .title
         float: left
         font-size: 14px
         color: rgb(7, 17, 27)
       .empty
         float: right
         font-size: 12px
         color: rgb(0, 160, 220)
     .list-content
       padding: 0 18px
       max-height: 217px
       overflow: hidden
       background: #fff
       .food
         position: relative
         padding: 12px 0
         box-sizing: border-box
         border-1px(rgba(7, 17, 27, 0.1))
         .name
           line-height: 24px
           font-size: 14px
           color: rgb(7, 17, 27)
         .price
           position: absolute
           right: 90px
           bottom: 12px
           line-height: 24px
           font-size: 14px
           font-weight: 700
           color: rgb(240, 20, 20)
       .cartcontrol-wrapper
         position: absolute
         right: 0
         bottom: 6px
</style>